Open
Conversation
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis PR introduces a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new TupleViewer React component to render OpenFGA relationship tuples in a styled, copyable block, and updates the “Task-Based Authorization” agent modeling guide to use it instead of inline YAML snippets.
Changes:
- Introduced
TupleViewercomponent (including a custom copy-to-clipboard YAML formatter and optional two-column layout). - Re-exported
TupleViewervia the SnippetViewer barrel so it’s available from@components/Docs. - Replaced several YAML code fences in
task-based-authorization.mdxwith<TupleViewer ... />usages.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/components/Docs/SnippetViewer/TupleViewer.tsx | New tuple rendering + YAML copy button implementation. |
| src/components/Docs/SnippetViewer/index.ts | Re-export of the new component. |
| docs/content/modeling/agents/task-based-authorization.mdx | Swaps YAML examples to the new visual TupleViewer. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/Docs/SnippetViewer/TupleViewer.tsx (1)
220-221: Prefer non-empty check for right-column rendering.Line 220 and Line 245 treat
rightColumnTuplesas truthy. Passing[]renders an empty second column. Consider checking.length > 0instead.💡 Proposed fix
export function TupleViewer({ tuples, rightColumnTuples }: TupleViewerProps): JSX.Element { const { plain } = usePrismTheme(); - const allTuples = rightColumnTuples ? [...tuples, ...rightColumnTuples] : tuples; + const hasRightColumn = (rightColumnTuples?.length ?? 0) > 0; + const allTuples = hasRightColumn ? [...tuples, ...rightColumnTuples!] : tuples; const yaml = allTuples.map(formatYaml).join('\n'); @@ - {rightColumnTuples ? ( + {hasRightColumn ? ( <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 2ch' }}>Also applies to: 245-246
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Docs/SnippetViewer/TupleViewer.tsx` around lines 220 - 221, The code currently treats rightColumnTuples as truthy which allows an empty array to trigger a second (empty) column; change both the allTuples construction and the second-column render condition to explicitly check rightColumnTuples.length > 0 (i.e., use rightColumnTuples && rightColumnTuples.length > 0) so allTuples = rightColumnTuples && rightColumnTuples.length > 0 ? [...tuples, ...rightColumnTuples] : tuples and render the right column only when rightColumnTuples.length > 0 inside the TupleViewer component where rightColumnTuples and formatYaml are used.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Docs/SnippetViewer/TupleViewer.tsx`:
- Around line 126-132: The YAML builder in formatYaml currently interpolates
tuple.user, tuple.relation, tuple.object, and tuple.condition.name as raw
strings which can break YAML; update formatYaml to pass these values through the
same value formatter used for context values (the project's existing "value
formatter" function) before interpolating so top-level scalars are
quoted/escaped correctly—replace direct uses of tuple.user, tuple.relation,
tuple.object and tuple.condition.name with calls to that formatter and adjust
the pushed lines to use the formatted results.
---
Nitpick comments:
In `@src/components/Docs/SnippetViewer/TupleViewer.tsx`:
- Around line 220-221: The code currently treats rightColumnTuples as truthy
which allows an empty array to trigger a second (empty) column; change both the
allTuples construction and the second-column render condition to explicitly
check rightColumnTuples.length > 0 (i.e., use rightColumnTuples &&
rightColumnTuples.length > 0) so allTuples = rightColumnTuples &&
rightColumnTuples.length > 0 ? [...tuples, ...rightColumnTuples] : tuples and
render the right column only when rightColumnTuples.length > 0 inside the
TupleViewer component where rightColumnTuples and formatYaml are used.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ced84891-0dc0-4219-b8c2-932a4dc231f4
📒 Files selected for processing (3)
docs/content/modeling/agents/task-based-authorization.mdxsrc/components/Docs/SnippetViewer/TupleViewer.tsxsrc/components/Docs/SnippetViewer/index.ts
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new docs UI component to render OpenFGA relationship tuples with a more structured, readable layout, and updates the task-based authorization agent guide to use it instead of inline YAML blocks.
Changes:
- Introduces
TupleViewerReact component with optional two-column tuple rendering and a copy-to-clipboard action. - Adds global styling for the tuple viewer, including responsive single-column behavior on mobile.
- Updates
task-based-authorization.mdxto render tuple examples viaTupleViewer.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/css/custom.css | Adds styling hooks and responsive layout rules for the new tuple viewer component. |
| src/components/Docs/SnippetViewer/TupleViewer.tsx | Implements the new TupleViewer component, tuple formatting, and copy button behavior. |
| src/components/Docs/SnippetViewer/index.ts | Exports TupleViewer from the SnippetViewer barrel for downstream imports. |
| docs/content/modeling/agents/task-based-authorization.mdx | Replaces YAML tuple snippets with TupleViewer usage for improved presentation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+11
to
+14
| import { CodeBlockContextProvider, createCodeBlockMetadata } from '@docusaurus/theme-common/internal'; | ||
| import CopyButton from '@theme/CodeBlock/Buttons/CopyButton'; | ||
| import type { RelationshipCondition } from '../RelationshipTuples/Viewer'; | ||
|
|
| } | ||
|
|
||
| function formatDisplayValue(value: unknown): string { | ||
| return typeof value === 'string' ? value : JSON.stringify(value); |
Comment on lines
+124
to
+139
| function formatYaml(tuple: Tuple): string { | ||
| const lines = [`- user: ${tuple.user}`, ` relation: ${tuple.relation}`, ` object: ${tuple.object}`]; | ||
|
|
||
| if (tuple.condition) { | ||
| lines.push(` condition:`); | ||
| lines.push(` name: ${tuple.condition.name}`); | ||
|
|
||
| const contextEntries = Object.entries(tuple.condition.context ?? {}); | ||
| if (contextEntries.length > 0) { | ||
| lines.push(` context:`); | ||
| } | ||
|
|
||
| for (const [key, value] of contextEntries) { | ||
| lines.push(` ${key}: ${formatYamlValue(value)}`); | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
What problem is being solved?
Create a component to display tuples. Currently we explain the tuples we need by describing them in YAML format or with Write() Request Viewer. Let's tweak the visual style cc @dongniwang @ttrzeng .
I did it with a 2 column layout, which complicated things, e.g. we can't use the standard CodeBlock. We can re-evaluate it, but according to Claude even if we do that, we won't be able to get what we are getting in terms of formatting.
How is it being solved?
Before:
After
What changes are made to solve it?
References
Review Checklist
mainSummary by CodeRabbit
Documentation
New Features